import { ref, watch } from "vue";

/**
 * 弹窗组件双向绑定   绑定了  show属性
 * @param props 
 * @param emit 
 */
export function useShowModal(props, emit, onChange = () => { }) {
  const showModal = ref(props?.show)
  watch(() => props?.show, (_show) => {
    showModal.value = _show;
  }, { immediate: true });


  watch(() => showModal.value, (_showMask) => {
    onChange(_showMask)
    emit("update:show", _showMask);
  });

  return {
    showModal,
    onClose(ev) {
      ev?.stopPropapation && ev?.stopPropapation()
      ev?.preventDefault && ev?.preventDefault()
      showModal.value = false
    }
  }
}

/**
* 输入组件的双向绑定  绑定了value属性
* @param props 
* @param emit 
* @key value
*/
export function useValue(props, emit, key = "value") {
  const useDefVal = ref(props[key])
  watch(() => props[key], (_value) => {
    useDefVal.value = _value;
  }, { immediate: true });


  watch(() => useDefVal.value, (_value) => {
    emit("update:" + key, _value);
  });

  return {
    useDefVal,

  }
}